<template>
<div class="page_yz">
  <div class="page_uc section">
    <div class="crumbs">
      <span>身份认证</span>
    </div>
    <div class="mod">
      <div class="mod_hd" id="cardHead">
        个人身份认证
        <a
          href="#"
          target="_blank"
          rel="noopener noreferrer nofollow"
        >申请机构认证</a>
      </div>
      <div class="certification-prompt" id="certification_prompt" style="display: block;">
        <span class="certificationText">您填写的信息必须与证件信息保持一致</span>
      </div>
      <div class="mod_bd" id="submit_info" style="display:block" growing-ignore="true">
        <form
          method="post"
          onsubmit="return!1"
          action
          id="form_uc_auth_cn"
          style="display:none"
          autocomplete="off"
          class="form_set"
        >
          <input type="hidden" name="method" value="do_auth_pro_china" />
          <div class="group">
            <div class="label">国籍</div>
            <div class="content" id="country_info_cn">
              <input type="text" class="input_text size_full" value="China" disabled />
              <input type="hidden" class="input_text size_full" name="countries_id" value="37" />
            </div>
          </div>
          <div class="group">
            <dt class="label">姓名</dt>
            <dd class="content">
              <input
                name="name"
                class="input_text size_full"
                maxlength="50"
                data-datatype="*"
                data-msg-null="请输入您的姓名"
                data-msg-error="请输入您的姓名"
              />
            </dd>
          </div>
          <div class="group">
            <div class="label">身份证号</div>
            <div class="content">
              <input
                name="card_no"
                class="input_text size_full"
                maxlength="20"
                data-datatype="passport"
                data-msg-null="请输入身份证号"
                data-msg-error="证件号码输入错误，请重新填写"
              />
            </div>
          </div>
          <div class="submit">
            <button type="submit" class="btn btn_submit size_full">认证</button>
          </div>
        </form>
        <form
          method="post"
          onsubmit="return!1"
          action
          id="form_uc_auth"
          style="display:none"
          autocomplete="off"
          class="form_set"
        >
          <input type="hidden" name="method" value="do_auth_pro" />
          <input type="hidden" name="countries_id" value="37" />
          <div class="group">
            <div class="label">国籍</div>
            <div class="content" id="country_info">
              <input type="text" class="input_text size_full" value="China" disabled />
            </div>
          </div>
          <div class="group">
            <div class="label">护照、驾照或其他合法证件号</div>
            <div class="content">
              <input
                name="card_no"
                class="input_text size_full"
                maxlength="20"
                data-datatype="passport"
                data-msg-null="请输入证件号码"
                data-msg-error="证件号码输入错误，请重新填写"
              />
            </div>
          </div>
          <div class="group">
            <div class="label">名</div>
            <div class="content">
              <input
                name="first_name"
                class="input_text size_full"
                maxlength="50"
                data-datatype="*"
                data-msg-null="请输入您的名字"
                data-msg-error="请输入您的名字"
              />
            </div>
          </div>
          <div class="group">
            <div class="label">姓</div>
            <div class="content">
              <input
                name="last_name"
                class="input_text size_full"
                maxlength="50"
                data-datatype="*"
                data-msg-null="请输入您的姓氏"
                data-msg-error="请输入您的姓氏"
              />
            </div>
          </div>
          <div class="group">
            <div class="label">证件照片</div>
            <div class="content">
              <div class="input_file_box">
                <input
                  type="file"
                  name="photo"
                  id="update_file"
                  data-datatype="*"
                  data-msg-null="请上传证件照片"
                />
                <div class="add_btn">
                  <span>
                    <i class="hb_icon_add"></i>上传证件信息页照片
                  </span>
                </div>
                <div class="edit_btn">
                  <span>
                    <i class="hb_icon_add"></i>修改证件照
                  </span>
                </div>
                <div class="preview" id="update_preview" data-msg-error="上传的文件超过最大限制|上传的文件类型不符合要求"></div>
                <div class="loading">
                  <img src="https://file.huobiasia.vip/global/image/loading.79549a7.svg" />
                </div>
              </div>
              <div class="form_tips">
                <p>支持JPG、PNG格式，文件小于5M；</p>
                <p>证件上的信息，清晰可见，不允许任何修改和遮挡，必须能看清证件号和姓名。</p>
                <a data-show-demo="0">示例</a>
                <div class="card_demo" data-demo-id="0">
                  <span>
                    <img src="https://file.huobiasia.vip/global/image/card_demo_1.26656f7.png" />
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div class="submit">
            <button type="submit" class="btn btn_submit size_full">认证</button>
          </div>
        </form>
      </div>
      <div class="mod_bd auth_info" id="auth_info" style="display:none;" growing-ignore="true">
        <h3 class="state">
          <img src="https://file.huobiasia.vip/global/image/hb_img_auth_success.8b02918.svg" /> 您的身份信息已通过认证
        </h3>
        <div class="info_wrap">
          <p>
            <span>国籍</span>China (中国)
          </p>
          <p>
            <span>证件号</span>42**********11
          </p>
          <p>
            <span>姓名</span> 测试小哥
          </p>
        </div>
      </div>
      <div class="mod_bd auth_info" id="auth_org" style="display:none" growing-ignore="true">
        <script type="text/x-template">
  <%
                         var _d = __data||{};
                         %> <h3 class="state"><img src="https://file.huobiasia.vip/global/image/hb_img_auth_success.8b02918.svg"> 您的机构信息已通过认证</h3>
                         <div class="info_wrap">
                             <p>
                                 <span>机构名称</span> <%= _d['org_name'] %> </p>
                         </div>
        </script>
      </div>
      <div class="mod_bd loading" id="loading" style="display: none;">
        <img src="https://file.huobiasia.vip/global/image/loading.79549a7.svg" alt />
      </div>
    </div>
  </div>
</div>
</template>

<style lang="scss" scoped>
.page_yz{
  background: #f2f3f8;
}
.page_uc {
    padding: 40px 0 30vh 0;
    
}
.section {
    width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 3;
}
.crumbs {
    height: 60px;
    line-height: 60px;
    padding: 0 30px;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 400;
    background: #ffffff;
}
.mod{
  background: #ffffff;
  .mod_hd {
    font-size: 16px;
    height: 48px;
    line-height: 48px;
    padding: 0 30px;
    border-radius: 3px 3px 0 0;
    -webkit-box-shadow: 0 2px 6px rgba(0,0,0,.1);
    box-shadow: 0 2px 6px rgba(0,0,0,.1);
    position: relative;
  }
  .auth_info{ 
    .state {
      text-align: center;
      font-size: 24px;
      height: 60px;
      padding: 56px 0 8px;
      font-weight: 400;
    }
    .info_wrap {
      width: 480px;
      margin: 0 auto;
      padding-left: 110px;
      padding-bottom: 100px;
      p{line-height: 56px;}
      span{
        color: #9194a4;
        display: inline-block;
        text-align: right;
        margin-right: 60px;
        min-width: 140px;
      }
    }
  }
}
a{color: #357ce1;margin-left: 50px;}
</style>